<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class Count extends React.Component {
        // 声明类组件的状态数据
        /**
         *  状态数据研究三个方向
         * 1. 如何定义
         * 2. 如何渲染: {this.state.xxx}
         *      1. 直接使用： {this.state.xxx}
         *      2. 解构使用： {count, msg} = this.state
         * 3. 如何改变状态数据:
         *      setState() : 才能触发render更新
         *          
         * 
         */
        state = {
            count: 10,
            msg: 'atguigu'
        }
        addCount(num){
            console.log('this: ',this)
            // 修改当前state上的count数据，每次加num个
            // this.state.count += num; // 修改数据不能直接在state上操作，数据可以改变，但是不会触发页面重新渲染
            
            // 正确的修改方式，使用 setState方法，即修改数据，同时触发render函数重新渲染
            this.setState({
                count: this.state.count + num
            })
        }
        render() {
            console.log('render run')
            // 先解构，在使用
            let {count, msg} = this.state;
            return (
                <>
                    <h3>直接使用</h3>
                    <p>count: {this.state.count}</p>
                    <p>msg: {this.state.msg}</p>
                    <h3>解构后使用</h3>
                    <p>count: {count}</p>
                    <p>msg: {msg}</p>
                    <p><button onClick={()=>this.addCount(3)}>count++</button></p>
                </>
            )
        }
    }
    root.render((
        <div>
            <Count/>
        </div>
    ))
</script>

</html>